<template>
  <div class="Newbankcard">
    <div class="header">
      <div class="hackhome"></div>
      <!-- 银行卡账号 -->
      <div class="table">
        <div class="tuo">
          <div class="tuo-1">
            <div class="tuo-2"></div>
            <span>银行卡账号</span>
          </div>
          <div>
            <el-button
              @click="Bankcard = true"
              size="mini"
              style="
                width: 64px;
                font-size: 10px;
                color: #fff;
                height: 30px;
                background-color: #f6b23e;
              "
              >新增</el-button
            >
          </div>
        </div>
        <!-- 银行卡列表 -->
        <el-table
          border
          :data="card"
          size="mini"
          :header-cell-style="{
            color: '#fff',
            background: '#6090EC',
            fontSize: '11px',
            fontWeight: 'normal',
          }"
          style="width: 100%"
        >
          <el-table-column prop="cardNumber" label="卡号"> </el-table-column>
          <el-table-column prop="cardType" label="卡类型" width="110">
          </el-table-column>
          <el-table-column prop="creditCardTime" label="卡有效期" width="140">
          </el-table-column>
          <el-table-column prop="commonCard" label="常用卡" width="80">
            <template slot-scope="scope">
              <template v-if="scope.row.commonCard == 'true'">是</template>
              <template v-if="scope.row.commonCard == 'false'">否</template>
            </template>
          </el-table-column>
          <el-table-column prop="cardholder" label="持卡人" width="100">
          </el-table-column>
          <el-table-column prop="documentsType" label="证件类型" width="90">
          </el-table-column>
          <el-table-column prop="documentsPhone" label="证件号" width="160">
          </el-table-column>
          <el-table-column prop="obligatePhone" label="预留手机号" width="120">
          </el-table-column>
          <el-table-column prop="name" label="操作" fixed="right" width="240">
            <template slot-scope="scope">
              <el-button
                style="background-color: #6090ec; color: #fff"
                size="mini"
                @click="btnModify(scope.row)"
                >修改</el-button
              >
              <el-button
                size="mini"
                style="background-color: #f6b23e; color: #fff"
                @click="dialogVisible = true"
                >操作记录</el-button
              >
              <el-button
                @click="Deletephone(scope.row)"
                style="background-color: #ff0000; color: #fff"
                size="mini"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 新增银行卡 -->
      <el-dialog
        title="会员信息查询-新增地址"
        :visible.sync="Bankcard"
        :before-close="handleClose"
        width="30%"
      >
        <div class="header-1">
          <div class="too-1-1">
            <div class="too"></div>
            <span>新增银行卡账户</span>
          </div>
        </div>

        <el-form
          style="margin-left: 20px"
          size="mini"
          :inline="true"
          :data="way"
          :model="way"
          class="pop"
        >
          <div class="pop-2">
            <div class="pop-9">卡类型</div>
            <el-select v-model="way.cardType" placeholder="请选择" size="mini">
              <el-option
                v-for="item in leixing"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="pop-1" style="margin-top: 10px">
            <div class="pop-1-2">
              <div class="pop-9">卡号</div>
              <el-input
                placeholder="请输入卡号"
                style="width: 220px"
                v-model="way.cardNumber"
                size="mini"
              ></el-input>
            </div>
          </div>
          <div class="pop-2">
            <div class="pop-1">
              <div class="pop-1-2">
                <div class="pop-9">有效期</div>
                <el-date-picker
                  size="mini"
                  v-model="way.creditCardTime"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </div>
            </div>
          </div>
          <div class="pop-2">
            <div class="pop-1">
              <div class="pop-1-2">
                <div class="pop-9">预留手机号</div>
                <el-input
                  placeholder="请输入卡号"
                  style="width: 220px"
                  v-model="way.obligatePhone"
                  size="mini"
                >
                </el-input>
              </div>
            </div>
          </div>
          <div class="pop-2">
            <div class="pop-5">
              <div class="pop-1-2">
                <div class="pop-9">持卡人</div>
                <el-input
                  placeholder="请输入持卡人姓名"
                  style="width: 220px"
                  v-model="way.cardholder"
                  size="mini"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="pop-2">
            <div class="pop-9">证件类型</div>
            <el-select
              v-model="way.documentsType"
              placeholder="请选择"
              size="mini"
            >
              <el-option
                v-for="item in zhengjian"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="pop-2" style="margin-top: 10px">
            <div class="pop-5">
              <div class="pop-1-2">
                <div class="pop-9">证件号</div>
                <el-input
                  placeholder="请输入卡号"
                  style="width: 220px"
                  v-model="way.documentsPhone"
                  size="mini"
                ></el-input>
              </div>
            </div>
          </div>
          <!-- <div class="pop-1">
            <div class="pop-1-2">
              <div class="pop-9">部门</div>
              <el-switch
               placeholder="请输入内容"
                  v-model="way"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
              </el-switch>
            </div>
          </div> -->
          <div class="pop-3">
            <el-button
              @click="getbackInsertBankCard"
              size="mini"
              style="
                width: 110px;
                font-size: 10px;
                color: #fff;
                height: 30px;
                background-color: #f6b23e;
              "
              >确定</el-button
            >
          </div>
        </el-form>
      </el-dialog>

      <!-- 修改银行卡 -->
      <el-dialog
        title="会员信息查询-修改银行卡"
        :visible.sync="Modify"
        :before-close="handleClose"
        width="30%"
      >
        <div class="header-1">
          <div class="too-1-1">
            <div class="too"></div>
            <span>修改银行卡账户</span>
          </div>
        </div>

        <el-form
          style="margin-left: 20px"
          size="mini"
          :inline="true"
          :data="way"
          :model="way"
          class="pop"
        >
          <div class="pop-2">
            <div class="pop-9">卡类型</div>
            <el-select v-model="way.cardType" placeholder="请选择" size="mini">
              <el-option
                v-for="item in leixing"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="pop-1" style="margin-top: 10px">
            <div class="pop-1-2">
              <div class="pop-9">卡号</div>
              <el-input
                placeholder="请输入卡号"
                style="width: 220px"
                v-model="way.cardNumber"
                size="mini"
              ></el-input>
            </div>
          </div>
          <div class="pop-2">
            <div class="pop-1">
              <div class="pop-1-2">
                <div class="pop-9">有效期</div>
                <el-date-picker
                  size="mini"
                  v-model="way.creditCardTime"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </div>
            </div>
          </div>
          <div class="pop-2">
            <div class="pop-1">
              <div class="pop-1-2">
                <div class="pop-9">预留手机号</div>
                <el-input
                  placeholder="请输入卡号"
                  style="width: 220px"
                  v-model="way.obligatePhone"
                  size="mini"
                >
                </el-input>
              </div>
            </div>
          </div>
          <div class="pop-2">
            <div class="pop-5">
              <div class="pop-1-2">
                <div class="pop-9">持卡人</div>
                <el-input
                  placeholder="请输入持卡人姓名"
                  style="width: 220px"
                  v-model="way.cardholder"
                  size="mini"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="pop-2">
            <div class="pop-9">证件类型</div>
            <el-select
              v-model="way.documentsType"
              placeholder="请选择"
              size="mini"
            >
              <el-option
                v-for="item in zhengjian"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="pop-2" style="margin-top: 10px">
            <div class="pop-5">
              <div class="pop-1-2">
                <div class="pop-9">证件号</div>
                <el-input
                  placeholder="请输入卡号"
                  style="width: 220px"
                  v-model="way.documentsPhone"
                  size="mini"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="pop-3">
            <el-button
              @click="getbackInsertBankCard"
              size="mini"
              style="
                width: 110px;
                font-size: 10px;
                color: #fff;
                height: 30px;
                background-color: #f6b23e;
              "
              >确定</el-button
            >
          </div>
        </el-form>
      </el-dialog>
      <el-dialog
        title="确认删除该银行卡吗"
        :visible.sync="Deletep"
        :before-close="handleClose"
        width="20%"
      >
        <div class="pop-3">
          <el-button
            @click="getbackUpdateBankCard"
            size="mini"
            style="
              width: 110px;
              font-size: 10px;
              color: #fff;
              height: 30px;
              background-color: #f6b23e;
            "
            >确定
          </el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "Newbankcard",
  // 父子传递参数
  props: ["MembershipInformationData"],
  data() {
    return {
      // 新增银行卡
      way: {
        cardNumber: "",
        creditCardTime: "",
        cardType: "",
        cardholder: "",
        obligatePhone: "",
        documentsType: "",
        documentsPhone: "",
        cardNumber: "",
      },
      card: [],
      leixing: [
        {
          label: "信用卡",
          value: "信用卡",
        },
        {
          label: "借记卡",
          value: "借记卡",
        },
      ],
      zhengjian: [
        {
          label: "身份证",
          value: "ID_CARD",
        },
      ],
      // 银行卡新增
      Bankcard: false,
      Deletep: false,
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        checked: true,
      },
      radio: 3,
      value: "",
      Modify: false,
      checked: false,
      sizeForm: {
        name: "",
        region: "",
      },
    };
  },
  methods: {
    // 列表
    getbackSelectCard() {
      this.$axios.getbackSelectCard({}).then((res) => {
        console.log(res);
        if (res.code == "200") {
          // 工单列表数据
          this.card = res.data;
          console.log(this.card);
        }
      });
    },
    // 新增银行卡
    getbackInsertBankCard() {
      this.dialogVisible = false;
      this.$axios
        .getbackInsertBankCard({
          cardNumber: this.way.cardNumber,
          creditCardTime: this.way.creditCardTime,
          cardType: this.way.cardType,
          cardholder: this.way.cardholder,
          obligatePhone: this.way.obligatePhone,
          documentsType: this.way.documentsType,
          documentsPhone: this.way.documentsPhone,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            this.$message({
              message: "新增成功",
              type: "success",
            });
          }
        });
    },
    // 修改银行卡
    btnModify(row) {
      this.Modify = true;
      this.bankCardId = row.bankCardId;
      console.log(this.bankCardId);
    },
    //修改银行卡
    getbackUpdateBankCard() {
      this.Modify = false;
      this.$axios
        .getbackUpdateBankCard({
          bankCardId: this.bankCardId,
          consignee: this.way.consignee,
          phone: this.way.phone,
          region: this.way.region,
          detailedAddress: this.way.detailedAddress,
          label: this.way.label,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            this.$message({
              message: "修改成功",
              type: "success",
            });
          }
        });
    },
    //删除银行卡
    Deletephone(row) {
      this.Deletep = true;
      this.bankCardId = row.bankCardId;
      console.log(this.bankCardId);
    },
    // 删除银行卡
    getbackDeleteBankCard() {
      this.Deletep = false;
      this.$axios
        .getbackDeleteBankCard({
          bankCardId: this.bankCardId,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            this.$message({
              message: "删除成功",
              type: "success",
            });
          }
        });
    },
    onSubmit() {
      console.log("submit!");
    },
    handleChange(value) {
      console.log(value);
    },
  },
  mounted() {
    this.getbackSelectCard();
  },
};
</script>
<style scoped>
.Newbankcard {
  height: 100vh;
  background-color: #f7f7f7;
}
.tuo {
  font-weight: bolder;
  display: flex;
  justify-content: space-between;
  margin-right: 20px;
}
.tuo-1 {
  display: flex;
}
.tuo-2 {
  width: 3.5px;
  height: 17px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 4px;
  font-size: 12px;
  margin-bottom: 25px;
}
.tou {
  width: 3.5px;
  height: 17px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 4px;
  font-size: 12px;
  margin-bottom: 25px;
}
.too-1-1 {
  display: flex;
  margin-left: 30px;
  padding-top: 20px;
  font-size: 20px;
}
.too {
  width: 3.5px;
  height: 22px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 4px;
  margin-bottom: 25px;
}
.invoice-9 {
  font-size: 11px;
  margin-right: 10px;
}
.invoice {
  width: 97%;
  margin: auto;
  display: flex;
  height: 44px;
  margin-bottom: 20px;
  min-width: 1200px;
}
.invoice-1 {
  margin-right: 30px;
}
/* 下划线 */
.hackhome {
  border-top: 1px solid #e0e0e0;
  width: 98%;
  margin-left: 20px;
  margin-bottom: 30px;
}
.botton {
  margin-left: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  min-width: 880px;
}
.table {
  margin-left: 20px;
  margin-right: 20px;
}
.top-6 {
  display: flex;
}
.tou-3 {
  display: flex;
}
.add {
  width: 500px;
  height: 350px;
  background-color: #fff;
  margin-left: 500px;
  border: 1px solid #c4c4c4;
}

#selectForm >>> .el-form-item__label {
  font-size: 11px;
}
.pop-9 {
  font-size: 11px;
  width: 70px;
  padding-top: 5px;
}
.pop {
  margin-left: 30px;
}
.pop-1 {
  display: flex;
  width: 250px;
}
.pop-1-2 {
  display: flex;
  margin-bottom: 12px;
  margin-right: 10px;
}
.pop-2 {
  display: flex;
}
.pop-3 {
  margin-top: 20px;
}
.add-1 {
  display: flex;
  font-size: 11px;
  margin-bottom: 5px;
}

.add-1-2 {
  width: 48px;
  height: 48px;
  background-color: black;
  border-radius: 50%;
  margin-left: 10px;
}
.add-1-3 {
  margin-top: 15px;
  margin-left: 10px;
  color: #2f80ed;
}
.add-1-4 {
  font-size: 11px;
  color: #828282;
  margin-left: 80px;
  margin-bottom: 15px;
}
.pop-4 {
  font-size: 16px;
  font-weight: bolder;
  color: #ff0000;
}
</style>
